<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./d3/d3.min.js" language="JavaScript"></script>
    <script src="./js/water.js" language="JavaScript"></script>
    <style>
        .liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
    </style>
</head>
<body>
<svg id="fillgauge" width="19%" height="200" onclick=""></svg>
<script language="JavaScript">
    var config = liquidFillGaugeDefaultSettings();
    config.circleColor = "#D4AB6A";
    config.textColor = "#553300";
    config.waveTextColor = "#805615";
    config.waveColor = "#AA7D39";
    config.circleThickness = 0.1;
    config.circleFillGap = 0.2;
    config.textVertPosition = 0.8;
    config.waveAnimateTime = 2000;
    config.waveHeight = 0.3;
    config.waveCount = 1;
    var gauge3 = loadLiquidFillGauge("fillgauge", 60.1, config);

    function NewValue(){
        if(Math.random() > .5){
            return Math.round(Math.random()*100);
        } else {
            return (Math.random()*100).toFixed(1);
        }
    }
</script>
<script type="text/javascript">
//产生随机数据
function getData() {
	var dataSet = {};
	var dataNum = 11;
	dataset = [];
	xMarks = [];
	for (var i = 1; i < dataNum; i++) {
		dataset.push(Math.round(Math.random() * 100));
		xMarks.push(i);
	}
	dataSet.dataset = dataset;
	dataSet.xMarks = xMarks;
	return dataSet;
}
var dataSet = getData();
</script>
<script type="text/javascript" src="js/linechart.js"></script>
<script type="text/javascript">
	drawLineChart(getData());
	function update(){
		gauge3.update(NewValue());
		drawChart(getData());
	}
</script>
<p align="left">
<button onClick="javascript:update();">刷新数据</button>
</p>
</body>
</html>